<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <title>Title</title>
  <style>
    .wrapper {
      margin: 100px auto;
      border: 1px solid #ccc;
      width: 200px;
      height: 300px;
      perspective: 600px;
    }

    .card {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 1s;
      transform-style: preserve-3d;
      cursor: pointer;
    }
    .card .active {
      transform: rotateY(180deg);
    }

    .card-face {
      position: absolute;
      width: 100%;
      height: 100%;
      line-height: 260px;
      color: #fff;
      text-align: center;
      font-weight: bold;
      font-size: 40px;
      backface-visibility: hidden;
    }
    .card-face .card-front {
       background-color: #f00;
     }
    .card-face .card-back {
       background-color: #4577dc;
       transform: rotateY(180deg);
     }

    .container {
      position: relative;
      width: 600px;
      height: 600px;
      margin: 120px auto;
      transform-style: preserve-3d;
      /* 为了让其更有立体效果 */
      -transform: rotateX(-30deg) rotateY(45deg);
      -transform-origin: 150px 150px 150px;
      -animation: rotate 6s infinite;
    }
    .container .page {
      position: absolute;
      width: 600px;
      height: 600px;
      text-align: center;
      line-height: 600px;
      color: #fff;
      background-size: cover;
    }
    .container .page:first-child {
      background-color: rgba(0,0,0,.2);
    }
    .container .page:nth-child(2) {
      transform: rotateX(90deg);
      transform-origin: 0 0;
      transition: transform 10s;
      background-color: rgba(179, 15, 64, 0.6);
    }

    .container .page:nth-child(3) {
      transform: translateZ(600px);
      background-color: rgba(22, 160, 137, 0.7);
    }

    .container .page:nth-child(4) {
      transform: rotateX(-90deg);
      transform-origin: -600px 600px;
      background-color: rgba(210, 212, 56, 0.2);
    }
    .container .page:nth-child(5) {
      transform: rotateY(-90deg);
      transform-origin: 0 0;
      background-color: rgba(201, 23, 23, 0.6);
    }
    .container .page:nth-child(6) {
      transform: rotateY(-90deg) translateZ(-600px);
      transform-origin: 0 600px;
      background-color: rgba(16, 149, 182, 0.2);
    }

  </style>
</head>
<body>
  <div class="wrapper">
    <div class="card">
      <div class="card-face card-front">front</div>
      <div class="card-face card-back">back</div>
    </div>
  </div>
  <div class="container">
    <div class="page">A</div>
    <div class="page">B</div>
    <div class="page">C</div>
    <div class="page">D</div>
    <div class="page">E</div>
    <div class="page">F</div>
  </div>
</body>
</html>
